<template>
  <div class="home">
    <!-- 轮播图部分 -->
    <el-carousel height="400px">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <img :src="item.image" :alt="item.title" class="carousel-image">
      </el-carousel-item>
    </el-carousel>

    <!-- 热门车型部分 -->
    <div class="popular-cars">
      <h2>热门车型</h2>
      <el-row v-if="loading">
        <el-col :span="24" class="loading-container">
          <el-skeleton :rows="3" animated />
          <el-skeleton :rows="3" animated />
          <el-skeleton :rows="3" animated />
        </el-col>
      </el-row>
      <div v-else class="car-grid">
        <div v-for="car in displayCars" :key="car.carId" class="car-card" @click="goToCarDetail(car.carId)">
          <img :src="car.image || defaultCarImage" :alt="car.title || car.brand" class="car-image">
          <div class="car-info">
            <h3>{{ car.brand }} {{ car.carType }}</h3>
            <p class="brand">车牌号: {{ car.carNum }}</p>
            <p class="price">{{ formatPrice(car.guidePrice) }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
// import { getPopularCars } from '@/api/car'
import { ElMessage } from 'element-plus'

export default {
  name: 'Home',
  setup() {
    const router = useRouter()
    const popularCars = ref([])
    const loading = ref(true)
    const defaultCarImage = ref('/src/assets/images/car.jpg')
    
    // 模拟数据
    const mockCars = [
      {
        carId: 1,
        brand: '小鹏',
        carType: 'P7',
        carNum: '粤A12345',
        guidePrice: 249800,
        image: '/src/assets/images/su7/416244656_1712454570865_1200.webp'
      },
      {
        carId: 2,
        brand: '比亚迪',
        carType: '汉',
        carNum: '粤B54321',
        guidePrice: 229800,
        image: '/src/assets/images/su7/416244655_1712454570576_1200.webp'
      },
      {
        carId: 3,
        brand: '特斯拉',
        carType: 'Model 3',
        carNum: '粤C67890',
        guidePrice: 279800,
        image: '/src/assets/images/su7/416244663_1712454568018_1200.webp'
      },
      {
        carId: 4,
        brand: '极氪',
        carType: '001',
        carNum: '粤D13579',
        guidePrice: 299800,
        image: '/src/assets/images/su7/416244662_1712454567758_1200.webp'
      },
      {
        carId: 5,
        brand: '蔚来',
        carType: 'ET7',
        carNum: '粤E24680',
        guidePrice: 358000,
        image: '/src/assets/images/su7/416244637_1712454565050_1200.webp'
      },
      {
        carId: 6,
        brand: '理想',
        carType: 'L9',
        carNum: '粤F97531',
        guidePrice: 459800,
        image: '/src/assets/images/su7/416244629_1712454565020_1200.webp'
      },
      {
        carId: 7,
        brand: '小鹏',
        carType: 'G9',
        carNum: '粤G13579',
        guidePrice: 289800,
        image: '/src/assets/images/su7/416244618_1712454561594_1200.webp'
      },
      {
        carId: 8,
        brand: '比亚迪',
        carType: '海豚',
        carNum: '粤H24680',
        guidePrice: 116800,
        image: '/src/assets/images/su7/416244628_1712454561405_1200.webp'
      }
    ]
    
    const carouselItems = ref([
      {
        id: 1,
        image: '/src/assets/images/su7/416244644_1712454564752_1200.webp',
        title: '豪华轿车'
      },
      {
        id: 2,
        image: '/src/assets/images/su7/416244618_1712454561594_1200.webp',
        title: 'SUV车型'
      },
      {
        id: 3,
        image: '/src/assets/images/su7/416244628_1712454561405_1200.webp',
        title: '新能源车'
      }
    ])

    // 直接使用模拟数据，不调用后端
    const loadMockData = () => {
      loading.value = true
      // 模拟网络请求延迟
      setTimeout(() => {
        popularCars.value = mockCars
        loading.value = false
        console.log('已加载模拟数据:', mockCars)
        ElMessage.success('已加载热门车型')
      }, 800)
    }

    // 格式化价格
    const formatPrice = (price) => {
      if (!price) return '暂无价格'
      return price.toLocaleString('zh-CN', {
        style: 'currency',
        currency: 'CNY'
      })
    }

    // 跳转到车辆详情页
    const goToCarDetail = (carId) => {
      router.push(`/car/${carId}`)
    }
    
    // 确保始终有车辆数据显示
    const displayCars = computed(() => {
      return popularCars.value
    })

    onMounted(() => {
      console.log('组件已挂载，加载模拟数据')
      loadMockData()
    })

    return {
      popularCars,
      carouselItems,
      formatPrice,
      goToCarDetail,
      loading,
      displayCars,
      defaultCarImage
    }
  }
}
</script>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popular-cars {
  margin-top: 40px;
}

.popular-cars h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.car-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  cursor: pointer;
}

.car-card:hover {
  transform: translateY(-5px);
}

.car-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.car-info {
  padding: 15px;
}

.car-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #333;
}

.car-info .brand {
  color: #666;
  margin: 5px 0;
}

.car-info .price {
  color: #f56c6c;
  font-size: 16px;
  font-weight: bold;
  margin: 5px 0;
}

.loading-container {
  padding: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style> 